<template>
  <div>
    <Back title="报告详情">
      <div class="nav">
        <p>体检人信息</p>
      </div>
      <div class="message">
        <div class="left">
          <p>
            <span>患者姓名</span>
            <span>张三</span>
          </p>
          <p>
            <span>证件类型</span>
            <span>身份证号</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>就诊卡号</span>
            <span>123456789</span>
          </p>
          <p>
            <span>证件号码</span>
            <span>340823198565245896</span>
          </p>
        </div>
        <div class="right">
          <p>
            <span>年龄</span>
            <span>24</span>
          </p>
          <p>
            <span>报告时间</span>
            <span>2020-12-12 10:09:09</span>
          </p>
        </div>
      </div>
    </Back>

    <Back :isShow="false" style="margin-top: 20px;">
      <div class="nav">
        <p>报告详情</p>
      </div>
      <div class="tablemsg">
        <div class="zuo">
          <p>
            <span class="shuxing">项目名称: </span>
            <span class="shuxingzhi"> 常规检查 &nbsp;</span>
            <span class="shuxing"> 项目编号:</span>
            <span class="shuxingzhi"> 20900001</span>
          </p>
          <el-table :data="tableData">
            <el-table-column prop="pro" label="项目名称" :height="60">
            </el-table-column>
            <el-table-column prop="tall" label="检查结果">
            </el-table-column>
            <el-table-column prop="refer" label="参考值">
            </el-table-column>
          </el-table>
        </div>
        <div class="you">
          <p>
            <span class="shuxing">项目名称: </span>
            <span class="shuxingzhi"> 血常规三项 &nbsp;</span>
            <span class="shuxing"> 项目编号:</span>
            <span class="shuxingzhi"> 20900001</span>
          </p>
          <el-table :data="Data">
            <el-table-column prop="pro" label="项目名称" :height="60">
            </el-table-column>
            <el-table-column prop="tall" label="检查结果">
            </el-table-column>
            <el-table-column prop="refer" label="参考值">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </Back>

  </div>
</template>
<script>
import { table } from "element-ui";
import Back from '@/components/Part/BackColor.vue'
export default {
  data() {
    return {
      tableData: [
        {
          pro: "身高",
          tall: "175cm",
        },
        {
          pro: "体重",
          tall: "65kg",
        },
        {
          pro: "BMI",
          tall: "19.0",
          refer: "18.5-22.9",
        },
        {
          pro: "血压（收缩压）",
          tall: "139mm/Hg",
          refer: "90-140",
        },
        {
          pro: "血压（舒张压）",
          tall: "70mm/Hg",
          refer: "60-90",

        },
      ],
      Data: [
        {
          pro: "血红蛋白",
          tall: "300g/L",
          refer: "参考范围：115-150g/L",
        },
        {
          pro: "红细胞",
          tall: "300g/L",
          refer: "参考范围：115-150g/L",
        },
        {
          pro: "血小板",
          tall: "300g/L",
          refer: "参考范围：115-150g/L",
        },
        {
          pro: "单核细胞绝对值",
          tall: "300g/L",
          refer: "参考范围：115-150g/L",
        },
        {
          pro: "淋巴细胞绝对值",
          tall: "300g/L",
          refer: "参考范围：115-150g/L",
        },
        {
          pro: "淋巴细胞百分比",
          tall: "300g/L",
          refer: "参考范围：115-150g/L",
        },
        {
          pro: "平均红细胞体积",
          tall: "300g/L",
          refer: "参考范围：115-150g/L",
        },
      ]
    };
  },
  components: {
    Back
  }
};
</script>
<style scoped lang="scss">
.el-button--primary {
  padding: 12px 40px;
}

.topper {
  width: 1280px;
  height: 190px;
  background-color: #fff;
  margin-bottom: 20px;
  box-shadow: 0px 0px 20px rgb(215 215 215);
  border-radius: 8px;
}

.nav {
  width: 100%;
  height: 50px;
  background-color: rgba(242, 242, 242, 1);
  display: flex;
  align-items: center;
}

.nav p {
  color: #006eff;
  font-size: 16px;
  text-indent: 1rem;
}

.message {
  display: flex;
}

.left {
  padding-left: 40px;
  padding-right: 100px;
}

.left span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.middle {
  padding-right: 100px;
}

.middle span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.right span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.tx {
  width: 64px;
  height: 64px;
  background-color: rgba(0, 110, 255, 0.0980392156862745);
  box-sizing: border-box;
  border-radius: 50%;
}

.right p:nth-of-type(1) {
  display: flex;
}

span:nth-of-type(1) {
  color: #aaaaaa;
  width: 95px;
}

/* -------------------底部 */

.tablemsg {
  display: flex;
}

.zuo {
  margin-right: 2%;
}

.zuo,
.you {
  width: 49%;

  p {
    margin: 40px 0 20px 0;
  }

  .shuxing {
    color: #aaaaaa;
    font-size: 12px;
  }

  .shuxingzhi {
    font-size: 16px;
    color: #000;
  }
}

.you {
  p {
    margin: 40px 0 20px 0;
  }
}
</style>
<style lang="scss">
[prop="prop"] {
  .el-table tr {
    height: 60px;
  }
}
</style>